﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Principal.Master" AutoEventWireup="true" CodeBehind="map.aspx.cs" Inherits="SISREBBVA.map" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="Styles/custom.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="panel" style="width: 70%; float: left;">
  <h3 class="panel-title">Visualización</h3>
  <div class="panel-content">
    <div id="map-canvas" style="width: 700px; height: 450px; line-height:0px;"></div>
  </div>
</div>
<div class="panel" style="width: 25%; float: left; margin-left: 2%;">
  <h3 class="panel-title">Descripción</h3>
  <div class="panel-content">
    En el mapa puedes observar en círculos rojos aquellos lugares (zip code) cercanos a ti, y según tus preferencias, puedes saber a qué lugar ir de compras, dentro de estos lugares.
  </div>
</div>
<asp:HiddenField ID="hidden" runat="server" />
<asp:HiddenField ID="tipos" runat="server" />

        <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&v=3.exp"></script>
        
        <script>
            var map, placesList;
            var geocoder;

            var citymap = {};
            var cityCircle;

            function initialize() {
                var info = document.getElementById('ContentPlaceHolder1_hidden').value;
                var datos = info.split('#');

                var tipos = document.getElementById('ContentPlaceHolder1_tipos').value;
                var sectores = tipos.split('#');

                var arreglo = [];

                for (var x = 1; x < sectores.length; x++) {
                    if (sectores[x] === 'es_auto') {
                        arreglo.push("car_dealer");
                    }
                    if (sectores[x] === 'es_barsandrestaurants') {
                        arreglo.push("bar"); arreglo.push("restaurant");
                    }
                    if (sectores[x] === 'es_contents') {
                        arreglo.push("book_store");
                    }
                    if (sectores[x] === 'es_fashion') {
                        arreglo.push("clothing_store"); arreglo.push("shoe_store");
                    }
                    if (sectores[x] === 'es_food') {
                        arreglo.push("food");
                    }
                    if (sectores[x] === 'es_health') {
                        arreglo.push("health");
                    }
                    if (sectores[x] === 'es_home') {
                        arreglo.push("home_goods_store");
                    }
                    if (sectores[x] === 'es_hyper') {
                        arreglo.push("grocery_or_supermarket");
                    }
                    if (sectores[x] === 'es_leisure') {
                        arreglo.push("shopping_mall");arreglo.push("movie_theater");arreglo.push("zoo");
                    }
                    if (sectores[x] === 'es_otherservices') {
                        
                    }
                    if (sectores[x] === 'es_propertyservices') {
                        arreglo.push("real_estate_agency");
                    }
                    if (sectores[x] === 'es_sportsandtoys') {

                    }
                    if (sectores[x] === 'es_tech') {
                        arreglo.push("electronics_store");
                    }
                    if (sectores[x] === 'es_transportation') {

                    }
                    if (sectores[x] === 'es_travel') {
                        arreglo.push("travel_agency");
                    }
                    if (sectores[x] === 'es_wellnessandbeauty') {
                        arreglo.push("spa");
                    }
                    if (sectores[x] === 'es_hotelservices') {

                    }
                }

                geocoder = new google.maps.Geocoder();

                var mapOptions = {
                    zoom: 10,
                    center: new google.maps.LatLng(40.439108, -3.681133),
                    panControl: false,
                    zoomControl: true,
                    scaleControl: true
                };

                map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);


                for (var i = 0; i < 3; i++) {
                    var direccion = datos[i] + " España";
                    geocoder.geocode({ 'address': direccion }, function (results, status) {
                        if (status === google.maps.GeocoderStatus.OK) {
                            citymap[datos[i]] = {
                                center: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
                                population: 300
                            };
                            //alert(datos[i]);
                            //alert(datos[i] + "    " + citymap[datos[i]].center);

                            var populationOptions = {
                                strokeColor: '#FF0000',
                                strokeOpacity: 0.8,
                                strokeWeight: 2,
                                fillColor: '#FF0000',
                                fillOpacity: 0.35,
                                map: map,
                                center: citymap[datos[i]].center,
                                radius: citymap[datos[i]].population
                            };
                            // Add the circle for this city to the map.
                            cityCircle = new google.maps.Circle(populationOptions);
                            //alert(arreglo);
                            var request = {
                                location: citymap[datos[i]].center,
                                radius: 200,
                                types: arreglo
                            };

                            var service = new google.maps.places.PlacesService(map);
                            service.nearbySearch(request, callback);

                            //alert(datos[i]);
                        } else {
                            alert("Geocode was not successful for the following reason: " + status);
                        }
                    });
                }

                var listener = google.maps.event.addListener(map, "idle", function () {
                    map.setZoom(4);
                    google.maps.event.removeListener(listener);
                });
            }

            function callback(results, status, pagination) {
                if (status != google.maps.places.PlacesServiceStatus.OK) {
                    return;
                } else {
                    createMarkers(results);
                }
            }

            function createMarkers(places) {
                var bounds = new google.maps.LatLngBounds();

                for (var i = 0, place; place = places[i]; i++) {
                    var image = {
                        url: place.icon,
                        size: new google.maps.Size(71, 71),
                        origin: new google.maps.Point(0, 0),
                        anchor: new google.maps.Point(17, 34),
                        scaledSize: new google.maps.Size(25, 25)
                    };

                    var marker = new google.maps.Marker({
                        map: map,
                        icon: image,
                        title: place.name,
                        position: place.geometry.location
                    });

                    bounds.extend(place.geometry.location);
                }
                map.fitBounds(bounds);
            }

            google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</asp:Content>
